<template>
  <div class="addmoude-container">
    <el-row>
      <el-form :model="form"
               :inline="true"
               ref="form"
               :rules="rules"
               label-width="96px">
        <el-col :span="24"
                class="col-24">
          <el-col :span="24"
                  id="useStyle">
            <el-col :span="12">
              <el-form-item label="顶级菜单"
                            prop="usertype"
                            class="common-style"
                            id="midTopMenu">
                <!-- <el-input v-model="form.usertype"
                        class="common-style"></el-input> -->
                <el-select v-model="form.topMenu"
                           placeholder="请选择"
                           style="width:100%!important;">
                  <el-option v-for="item in topMenuArr"
                             :key="item.value"
                             :label="item.label"
                             :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12"
                    style="padding-left:4%;">
              <el-form-item label="所属分类级别"
                            prop="usertype"
                            class="common-style"
                            id="midTopMenu">
                <!-- <el-input v-model="form.usertype"
                        class="common-style"></el-input> -->
                <el-select v-model="form.topMenu"
                           placeholder="请选择"
                           style="width:100%!important;">
                  <el-option v-for="item in catoryArr"
                             :key="item.value"
                             :label="item.label"
                             :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所属分类"
                            prop="usertype"
                            class="common-style"
                            id="midTopMenu">
                <!-- <el-input v-model="form.usertype"
                        class="common-style"></el-input> -->
                <el-select v-model="form.topMenu"
                           placeholder="请选择"
                           style="width:100%!important;">
                  <el-option v-for="item in relativeArr"
                             :key="item.value"
                             :label="item.label"
                             :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12"
                    style="padding-left:4%;">
              <el-form-item class="user-style"
                            label="模块名称"
                            prop="moduleName">
                <el-input v-model="form.moduleName"
                          class="common-style"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <!-- class="mid-modelicon" -->
              <el-form-item class="user-style"
                            label="模块图标"
                            prop="username">
                <el-input v-model="form.username"
                          class="common-style"></el-input>
              </el-form-item>
              <!-- <el-tooltip class="item"
                          effect="dark"
                          content="请填写Font Awesome的图标库图标类名"
                          placement="right-start">
                <span class="el-icon-info"
                      id="midSpanInfo"></span>
              </el-tooltip> -->
            </el-col>
            <el-col :span="12"
                    style="padding-left:4%;">
              <!-- class="mid-sort" -->
              <el-form-item class="user-style"
                            label="排序"
                            prop="username">
                <el-input v-model="form.username"
                          class="common-style"></el-input>
              </el-form-item>
              <!-- <el-tooltip class="item"
                          effect="dark"
                          content="0~255之间,值越大越靠前"
                          placement="right-start">
                <span class="el-icon-info"
                      id="midSortSize"></span>
              </el-tooltip> -->
            </el-col>
            <el-col :span="12"
                    class="mid-show">
              <el-form-item class="user-style"
                            label="是否显示"
                            align="center"
                            prop="username">
                <el-switch v-model="value2"
                           class="switchStyle"
                           active-color="#13ce66"
                           active-text="开启"
                           inactive-color="#ff4949"
                           inactive-text="关闭">
                </el-switch>
              </el-form-item>

              <!-- <el-tooltip class="item"
                          effect="dark"
                          content="选择开启则显示提示左侧菜单"
                          placement="right-start">
                <span class="el-icon-info"
                      id="midShowTitle"></span>
              </el-tooltip> -->
            </el-col>
            <el-col :span="12"
                    style="padding-left:4%;">
              <el-form-item class="user-style"
                            label="是否禁用"
                            align="center"
                            prop="username">
                <el-switch v-model="value1"
                           class="switchStyle"
                           active-color="#13ce66"
                           active-text="开启"
                           inactive-color="#ff4949"
                           inactive-text="关闭">
                </el-switch>
              </el-form-item>
            </el-col>

          </el-col>
        </el-col>
      </el-form>
    </el-row>
    <div style="text-align:center;">

      <el-button id="footerCancel"
                 @click="onCancel">取消</el-button>
      <el-button type="primary"
                 @click="onSave('form')">保存</el-button>
    </div>

  </div>
</template>
    <script>
import axios from 'axios'
import qs from 'qs'
import { menuManagementApi } from "@/services/SystemSetting";
export default {
  data () {
    return {
      codeOne: '',
      value1: true,
      value2: true,
      uuid: this.$route.query.uuid,
      form: {
        moduleName: '',
        topMenu: '1',
        username: '',
        usertype: '',
        usernickname: '',
        loginpassword: '',
        textarea: '',
      },
      topMenuArr: [
        {
          value: '1',
          label: '顶级菜单'
        }, {
          value: '2',
          label: '项目中心'
        }, {
          value: '3',
          label: '工作中心'
        }
      ],
      catoryArr: [
        {
          value: '1',
          label: '顶级菜单'
        }, {
          value: '2',
          label: '一级菜单'
        }, {
          value: '3',
          label: '二级菜单'
        }
      ],
      relativeArr: [
        {
          value: '1',
          label: '所属分类'
        }
      ],
      updateArr: [
        {
          value: '1',
          label: '强制更新'
        }, {
          value: '2',
          label: '非强制更新'
        }
      ],
      updateArr: [
        {
          value: '1',
          label: '强制更新'
        }, {
          value: '2',
          label: '非强制更新'
        }
      ],
      fileList: [],
      rules: {
        moduleName: [{ required: true, message: '模块名称不能为空', trigger: 'blur' }]
      }
    }
  },
  props: {
    catchSave: Function,
    catchBack: Function,
    todos: String,
  },
  //监听
  watch: {
    todos (ne, old) {
      //console.log('新值', ne, old);
      if (ne == '0' || ne == 0) {
        // console.log('子组件=', ne, old)
      }
    }
  },
  methods: {
    //上传文件
    handleRemove (file, fileList) {
      //console.log(file, fileList);
    },
    handlePreview (file) {
      //console.log(file);
    },
    handleExceed (files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove (file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    //取消事件
    onCancel () {
      this.catchBack(this.codeOne);
      //this.$router.push('/menuManagement');
    },
    //保存事件
    onSave (data) {
      this.$refs[data].validate((valid) => {
        if (valid) {
          //this.$router.push('/menuManagement');
          this.catchSave('0')
        } else {
          //console.log('error submit!!');
          return false;
        }
      });
    },
    //列表数据
    getData () {
    },
  },
  mounted () {
    this.getData();
  },
}
  </script>    
  <style lang="scss"  scoped>
.footer-box {
  text-align: center;
}
#footerCancel {
  margin-right: 13px;
}
#midShowTitle {
  float: right;
  position: absolute;
  right: -15px;
  top: 14px;
}
.mid-show {
  position: relative;
  display: flex;
  flex-direction: row;
}
#midSortSize {
  float: right;
  position: absolute;
  right: -15px;
  top: 14px;
}
.mid-sort {
  position: relative;
  display: flex;
  flex-direction: row;
}
#midSpanInfo {
  float: right;
  position: absolute;
  right: -15px;
  top: 14px;
}
.mid-modelicon {
  position: relative;
  display: flex;
  flex-direction: row;
}
#midTopMenu {
  width: 100% !important;
}
.switchStyle /deep/ .el-switch__core {
  width: 70px !important;
}
.switchStyle /deep/ .el-switch__label {
  position: absolute;
  display: none;
  color: #fff;
}
.switchStyle /deep/ .el-switch__label--left {
  z-index: 9;
  right: -5px;
}
.switchStyle /deep/ .el-switch__label--right {
  z-index: 9;
  left: -5px;
}
.switchStyle /deep/ .el-switch__label.is-active {
  display: block;
}
.switchStyle /deep/ .el-switch .el-switch__core {
  width: 100px !important;
}
.switchStyle /deep/ .el-switch .el-switch__label {
  width: 50px !important;
}
.col-24 {
  margin-top: 20px;
}
.common-style {
  width: 100% !important;
}
.add-style {
  font-size: 18px;
  //font-family: SimSun;
  font-weight: 400;
}
.addmoude-container {
  //height: 100vh;
  /deep/ .el-form-item__content {
    line-height: 40px;
    position: relative;
    font-size: 14px;
    width: 67% !important;
  }
  //padding: 0 20px;
}
.user-style {
  width: 100% !important;
  /deep/ .el-form-item__label {
    text-align: left !important;
    float: left;
    font-size: 14px;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: #333 !important;
    line-height: 40px;
    padding: 0 12px 0 0;
    box-sizing: border-box;
    margin-top: 0px !important;
  }
}

.update-status {
  width: 100% !important;
  .el-input-group__append button.el-button,
  .el-input-group__append div.el-select .el-input__inner,
  .el-input-group__append div.el-select:hover .el-input__inner,
  .el-input-group__prepend button.el-button,
  .el-input-group__prepend div.el-select .el-input__inner,
  .el-input-group__prepend div.el-select:hover .el-input__inner {
    border-color: transparent;
    background-color: white !important;
    color: #1890ff;
    border-top: 0;
    border-bottom: 0;
  }
  .el-input-group__append button.el-button:hover {
    border: 1px solid #1890ff !important;
  }
}
#useStyle {
  /deep/ .el-form-item__label {
    text-align: left;
    float: left;
    font-size: 14px;
    color: #606266;
    line-height: 40px;
    padding: 0 12px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-top: 0px !important;
  }
}
.addmoude-container {
  .el-form-item__content {
    line-height: 40px;
    position: relative;
    font-size: 14px;
    width: 83% !important;
  }
  //padding: 0 20px;
}
</style>